<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
    <li>项目 4</li>
</ul>
<script>
var p = document.createElement("p")
p.appendChild(document.createTextNode("这个是 p 元素"))

var ul = document.querySelector("ul");
//返回值就是被替换掉的那个元素   参数1:新元素  参数2:被替换的元素
var r = ul.replaceChild(p, ul.firstElementChild);
ul.appendChild(r)
</script>
</body>
</html>